<template>
  <div class="home">
    <div class="header">
      <el-steps :active="num" simple>
        <el-step title="步骤 1" icon="el-icon-edit"></el-step>
        <el-step title="步骤 2" icon="el-icon-upload"></el-step>
        <el-step title="步骤 3" icon="el-icon-picture"></el-step>
      </el-steps>
    </div>
    <div class="content">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="80px"
        class="demo-ruleForm"
      >
        <el-card class="box-card" v-if="num==1">
          <div slot="header" class="clearfix">
            <span>账号注册</span>
          </div>

          <el-form-item label="用 户 名" prop="name" verify :minLength="1">
            <el-input clearable v-model="ruleForm.name" autocomplete="off" placeholder="请输入你的登录名"></el-input>
          </el-form-item>
          <el-form-item label="用户密码" prop="pass">
            <el-input
              clearable
              type="password"
              v-model="ruleForm.pass"
              autocomplete="off"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input
              clearable
              type="password"
              v-model="ruleForm.checkPass"
              autocomplete="off"
              placeholder="请再次输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱地址" prop="email" verify email>
            <el-input v-model="ruleForm.email" placeholder="请输入邮箱地址" clearable></el-input>
          </el-form-item>
        </el-card>

        <el-card class="box-card" v-if="num==2">
          <div slot="header" class="clearfix">
            <span>身份信息完善</span>
          </div>
          <el-form-item label="QQ号码" prop="qq" verify int :gt="0">
            <el-input
              type="text"
              v-model="ruleForm.qq"
              autocomplete="off"
              placeholder="请输入你的QQ号码"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="电话号码" prop="phone" verify phone>
            <el-input
              type="text"
              v-model="ruleForm.phone"
              autocomplete="off"
              placeholder="请输入电话号码"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="人生格言" prop="geyan" verify :minLength="1">
            <el-input v-model="ruleForm.geyan" placeholder="请输入人生格言" clearable></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio v-model="radio" label="1">男</el-radio>
            <el-radio v-model="radio" label="2">女</el-radio>
          </el-form-item>
        </el-card>

        <el-card class="box-card" v-if="num==3">
          <div slot="header" class="clearfix">
            <span>上传头像</span>
          </div>
          <span>上传图片不能超过2mb</span>
          <el-tooltip class="item" effect="dark" content="jpg only，size<2mb" placement="top-start">
            <el-upload
              class="avatar-uploader"
              action="http://127.0.0.1:9999/invitation/imgUrl"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-tooltip>
        </el-card>
      </el-form>
    </div>
    <el-button type="primary" @click="btn('ruleForm')">{{next}}</el-button>
  </div>
</template>

<script>
import API from "@/api/user.js";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      next: "下一步",
      imageUrl: "",
      email: "",
      name: "",
      geyan: "",
      qq: "",
      phone: "",
      num: 1,
      radio: "2",
      value: "",
      ruleForm: {
        pass: "",
        checkPass: "",
        email: "",
        name: "",
        geyan: "",
        qq: "",
        phone: ""
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }]
      }
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = res.data;
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    btn(val) {
      this.$refs[val].validate(valid => {
        if (valid) {
          if (this.num < 3) {
            if (this.num < 2) {
              this.next = "下一步";
            } else {
              this.next = "注册";
            }
            this.num++;
          } else {
            if (this.imageUrl != "") {
              let obj = {
                email: this.ruleForm.email,
                geyan: this.ruleForm.geyan,
                phone: this.ruleForm.phone,
                qq: this.ruleForm.qq,
                userName: this.ruleForm.name,
                userPwd: this.ruleForm.pass,
                userSex: this.radio,
                userUrl: this.imageUrl
              };
              this.$axios.post(API.reg, obj).then(res => {
                if (res.data.responseCode == 200) {
                  this.$router.push("/login");
                } else {
                  this.$message({
                    message: res.data.responseMsg,
                    type: "warning"
                  });
                }
              });
            }
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.home {
  background-color: rgba(6, 240, 240, 0.493);
  background-image: url(../login/bgImg1.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 720px;
}
.header {
  width: 100%;
  height: 100px;
  top: 0px;
}
.content {
  width: 80%;
  margin: 0 auto;
  height: 400px;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.box-card {
  width: 480px;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.8);
}
#app {
  margin: 0;
  padding: 0;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #938c9d;
  background-color: rgba(95, 116, 233, 0.363);
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>